import type { CalendarProps } from './index.tsx'
import { Dayjs } from 'dayjs'
interface MonthCalendarProps extends CalendarProps {
}
//渲染allDays
function renderDays(days: Array<{ date: Dayjs, currentMounth: boolean }>) {
    const rows = []
    for (let i = 0; i < 6; i++) {
        const row = []
        for (let j = 0; j < 7; j++) {
            const item = days[i * 7 + j]
            row[j] = <div className={'calendar-month-day-cell ' + (item.currentMounth ? 'calendar-month-day-cell-current' : '')}>{item.date.date()}</div>
            //
        }
        rows.push(row)
    }
    return rows.map(row => <div className='calendar-month-day-row'>{row}</div>)
}
function getAllDays(date: Dayjs) {
    const startDate = date.startOf('month')//拿到这个月的第一天
    const day = startDate.day()//拿到这个月第一天是周几
    const daysInfo: Array<{ date: Dayjs, currentMounth: boolean }> = new Array(6 * 7)//得到一个六行七列的数组
    for (let i = 0; i < day; i++) {
        daysInfo[i] = {
            date: startDate.subtract(day - i, 'day'),
            //填上上一个月的日期
            currentMounth: false//标记这个日期不是当前月的
        }
    }
    for (let i = day; i < daysInfo.length; i++) {
        const calcDate = startDate.add(i - day, 'day')
        daysInfo[i] = {
            date: calcDate,
            //填上这个月的日期
            currentMounth: calcDate.month() === date.month()
            //判断这个日期是不是当前月
        }
    }
    return daysInfo
}
function MonthCalendar(props: MonthCalendarProps) {
    const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const allDays = getAllDays(props.value)//拿到所有的天数
    return (
        <div className="calendar-month">
            <div className="calendar-month-week-list">
                {weekList.map((week) => (
                    <div className="calendar-month-week-list-item" key={week}>{week}</div>
                ))}
            </div>
            <div className="calendar-month-day">
                {renderDays(allDays)}
            </div>
        </div>

    )
}
export default MonthCalendar;